<template>
	<view class="content">
		<div class="box">
			<p class="p1">火车票预定</p>
			<p class="p2">便捷购票，服务您的每一次出行</p>
		</div>
		<div class="box2">
			<p class="p3">
				<text class="city1" @click="toaddress">{{city1}}</text>
				<!-- <icon class="iconfont icon-jiantou"></icon> -->
				<image @click="switchCity" src="../../static/切换.png" mode=""></image>
				<text class="city2" @click="toaddress2">{{city2}}</text>
			</p>
			<p class="p3 p4">
				<text @click="calendar">{{data}} </text>
				<u-calendar :maxDate="maxDate" rowHeight="80" showLunar :show="show" @confirm="confirm"></u-calendar>
			</p>
			<u-button color='#FF8D41' shape="circle" class="custom-style" text="查询" @click="toSearchCar"></u-button>
			<p class="p3 p5">
				<text size="12">{{searchHistory[0]}}</text>
				<text size="12" @click="clearHistory">清除历史</text>
			</p>
		</div>
		<div class="swiper">
			<u-swiper :list="list1" indicator indicatorMode="line" circular class="swipera"></u-swiper>
		</div>
		<view class="footer">
			<view class="footer-v1">
				<text class="footer-v1-t1">出行资讯</text>
				<text class="footer-v1-t2" @click="Listxq">更多 <text>></text></text>
			</view>
			<view class="footer-v2" v-for="(item,index) in 5" :key="index" @click="toDetail(item)">
				<view class="footer-v2-left"> <text class="">{{item+1}}</text></view>
				<view class="footer-v2-center">
					<News></News>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				list1: [
					'https://dimg04.c-ctrip.com/images/0zg4612000ap2m6ht3DD7.png',
					'https://dimg04.c-ctrip.com/images/0zg5312000artha0v5BF6.png',
					'https://dimg04.c-ctrip.com/images/0zg3j12000augu1mgB200.png',
				],
				city1: "北京",
				city2: "上海",
				show: false,
				maxDate: `${year}-${month}-${date + 30}`,
				data: `${year}-${month}-${date}`,
				searchHistory: [],
				list: {
					title: " '五一'假期七座小型客车免费通行全国收费公路",
					times: "澎湃新闻 2022/4/27",
					imgUrl: "https://img-qn.51miz.com/preview/photo/00/01/54/79/P-1547932-2C0515C0.jpg"
				}
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			// 清除历史
			clearHistory() {
				this.searchHistory = []
			},

			//切换城市
			switchCity() {
				let temp = this.city1
				this.city1 = this.city2
				this.city2 = temp
			},
			//跳转到  查询北京-上海的车票页面
			toSearchCar() {
				let search = this.city1 + '-' + this.city2
				this.searchHistory.splice(0, 1, search)

				uni.navigateTo({
					url: `./SearchCar/SearchCar?city1=${this.city1}&city2=${this.city2}&data=${this.data}`
				})
			},
			Listxq() {
				uni.navigateTo({
					url: "./TravelInfo/TravelInfo"
				})
			},
			calendar() {
				this.show = true
			},
			confirm(e) {
				this.show = false
				console.log(e);
				this.data = e[0]
			},
			toaddress() {
				uni.navigateTo({
					url: './address/address',
				});
				this.choos()
			},
			toaddress2() {
				uni.navigateTo({
					url: './addressC/addressC',
				});
				this.choos2()
			},
			choos() {
				let _this = this
				uni.$on('update', function(data) {
					console.log('城市1:' + data.msg);
					_this.city1 = data.msg
				})
			},
			choos2() {
				let _this = this
				uni.$on('update2', function(data) {
					console.log('城市2:' + data.msg);
					_this.city2 = data.msg
				})
			},
			toDetail() {

				let json = JSON.stringify(this.list)
				let jsoncode = encodeURIComponent(json)
				uni.navigateTo({
					url: '/pages/index/TravelDetail/TravelDetail?detail=' + jsoncode,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		background-color: #dfe9f7;

		.box {
			box-sizing: border-box;
			width: 100%;
			height: 350rpx;
			background-color: #1BA9BA;
			border-radius: 0 0 15% 15%;
			padding-left: 100rpx;

			.p1 {
				line-height: 150rpx;
				color: #fff;
				font-size: 55rpx;
			}

			.p2 {
				color: #fff;
				font-size: 30rpx;
			}

		}

		.box2 {
			width: 95%;
			height: 100%;
			background: white;
			margin: auto;
			border-radius: 30rpx;
			margin: 0 auto;
			margin-top: -120rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.icon-jiantou {
				font-size: 60rpx;
			}

			.p3 {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.city1 {
					width: 45%;
					text-align: center;
				}

				image {
					width: 10%;
					height: 45rpx;
				}

				.city2 {
					width: 45%;
					text-align: center;
				}

				border-bottom: 1px solid #d8deef;
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				line-height: 80rpx;
			}

			.p4 {

				margin-bottom: 20rpx;
				padding: 0 250rpx;

			}

			.p5 {
				border-bottom: 0;
			}

			.custom-style {
				width: 100%;
				height: 50rpx;
			}
		}

		.swiper {
			width: 95%;
			height: 100%;
			background: white;
			margin: auto;
			border-radius: 30rpx;
			margin: 0 auto;
			margin-top: 40rpx;
			box-sizing: border-box;

			.swipera {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}

		}


		.footer {
			width: 95%;
			height: 70%;
			background: white;
			margin: auto;
			border-radius: 30rpx;
			margin-top: 40rpx;

			.footer-v1 {
				width: 90%;
				height: 12%;
				display: flex;
				margin: auto;
				justify-content: space-between;
				align-items: center;
				// background: red;
				border-bottom: 1px solid #ccc;

				.footer-v1-t1 {
					font-size: 40rpx;
					font-weight: bold;
					margin-left: 30rpx;
					line-height: 80rpx;
				}

				.footer-v1-t2 {
					font-size: 18rpx;
					margin-right: 30rpx;
					color: #ccc;
				}

			}

			.footer-v2 {
				width: 90%;
				height: 20%;
				margin: 20rpx auto;
				display: flex;
				border-bottom: 1px solid #ccc;

				.footer-v2-left {
					width: 15%;
					height: 100%;
					text-align: center;

					text {
						font-size: 35rpx;
						font-weight: bold;
						color: red;
						line-height: 80rpx;
					}
				}

				.footer-v2-center {
					width: 80%;
					height: 100%;
				}

			}
		}

		.title {
			color: $u-primary;
			text-align: center;
			padding: 20rpx 0 0 0;
		}
	}
</style>